<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>小学数学练习</title>

		<link href="css/bootstrap.min.css" rel="stylesheet">
		<style>
			h2,
			h3,
			h4,
			h5,
			h6 {
				color: green;
			}
			hr{
				color: green;
				border: double;
			}
			#navbar{
				background-color: lightgray;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-xm-12 col-sm-12 col-md-12">
					<div class="tabbable" id="tabs1">
						<ul id="navbar" class="nav nav-tabs">
							<li class="active">
								<a href="#home1" data-toggle="tab">练习</a>
							</li>
							<li>
								<a href="#home2" data-toggle="tab">参考资料</a>
							</li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane active" id="home1">
								<h1 style="text-align: center;">小学数学练习题</h1>
								<hr />
								<h2>整数</h2>
								<hr/>
								<!--
                                	1:+
                                	2:-
                                	3:*
                                	4:/
                                	type 1:Integer
	                                	2:小数
	                                	3：分数
                                -->
								<h3>加法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=1&type=1'">20以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=50&sig=1&type=1'">50以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=100&sig=1&type=1'">100以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=1000&sig=1&type=1'">1000以内</button>
								</div>
								<h3>减法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=2&type=1'">20以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=50&sig=2&type=1'">50以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=100&sig=2&type=1'">100以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=1000&sig=2&type=1'">1000以内</button>
								</div>
								<h3>乘法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=5&sig=3&type=1'">5以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=3&type=1'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=15&sig=3&type=1'">15以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=3&type=1'">20以内</button>
								</div>
								<h3>除法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=4&type=1'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=15&sig=4&type=1'">15以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=4&type=1'">20以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=50&sig=4&type=1'">50以内</button>
								</div>
								<hr />
								<h2>小数</h2>
								<hr/>
								<h3>加法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=5&sig=1&type=2'">5以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=1&type=2'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=1&type=2'">20以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=50&sig=1&type=2'">50以内</button>
								</div>
								<h3>减法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=5&sig=2&type=2'">5以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=2&type=2'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=2&type=2'">20以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=50&sig=2&type=2'">50以内</button>
								</div>
								<h3>乘法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=5&sig=3&type=2'">5以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=3&type=2'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=15&sig=3&type=2'">15以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=3&type=2'">20以内</button>
								</div>
								<h3>除法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=5&sig=4&type=2'">5以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=4&type=2'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=15&sig=4&type=2'">15以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=4&type=2'">20以内</button>
								</div>
								<hr />
								<h2>分数</h2>
								<hr/>
								<h3>加法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=5&sig=1&type=3'">5以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=1&type=3'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=15&sig=1&type=3'">15以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=1&type=3'">20以内</button>
								</div>
								<h3>减法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=5&sig=2&type=3'">5以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=2&type=3'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=15&sig=2&type=3'">15以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=&type=3'">20以内</button>
								</div>
								<h3>乘法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=5&sig=3&type=3'">5以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=3&type=3'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=15&sig=3&type=3'">15以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=3&type=3'">20以内</button>
								</div>
								<h3>除法</h3>
								<div class="btn-group"> 
									<button class="btn-info" onclick="location.href='plus.html?size=10&sig=4&type=3'">10以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=15&sig=4&type=3'">15以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=20&sig=4&type=3'">20以内</button>
									<button class="btn-info" onclick="location.href='plus.html?size=50&sig=4&type=3'">50以内</button>
								</div>
							</div>
							<div class="tab-pane" id="home2">
								<div class="tabbable" id="tabs2">
									<ul class="nav nav-tabs">
										<li class="active">
											<a href="#src1" data-toggle="tab">乘法口诀表</a>
										</li>
										<li>
											<a href="#src2" data-toggle="tab">工具</a>
										</li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane active" id="src1">
											<table id="muttab" class="table table-bordered table-hover">
											</table>
										</div>
										<div class="tab-pane" id="src2">
											<button id="calBtn" class="btn btn-success">计算器(验算)</button>
											<button class="btn btn-success" onclick="location.href='https://www.baidu.com'">百度</button>
											<hr />
											<div class="input-group cal" hidden="hidden">
												<input id="oper1" class="input-group form-control" style="width: 50px;"/>
												<div class="btn-group">
													<button id="headBtn" class="btn btn-success">
														+
													</button> 
													<button data-toggle="dropdown" class="btn btn-success dropdown-toggle">
														<span class="caret"></span>
													</button>
													<ul id="operSignal" class="dropdown-menu">
														<li class="active" onclick="actived(this);headBtn('+')">
															<a id="calPlus"><strong>+</strong></a>
														</li>
														<li onclick="actived(this);headBtn('-')">
															<a id="calMinus"><strong>-</strong></a>
														</li>
														<li onclick="actived(this);headBtn('*')">
															<a id="calMut"><strong>*</strong></a>
														</li>
														<li onclick="actived(this);headBtn('/')">
															<a id="calDivid"><strong>÷</strong></a>
														</li>
													</ul>
												</div>
										      	<input id="oper2" class="input-group form-control" style="width: 50px;"/>
										      	<div class="btn-group">
										      		<button id="getResult" class="btn btn-success"><strong>=</strong></button>
										      	</div>
										      	<input id="calResult" class="input-group form-control" disabled="disabled" style="width: 60px;"/>
										    	<div class="btn-group">
										    		<button class="clear btn btn-danger" onclick="$('#oper1,#oper2,#calResult').val('')">清空</button>
										    	</div>
											</div>
											<p></p>
											<div class="input-group cal" hidden="hidden">
												<input id="xiaoshu" class="input-group form-control" style="width: 100px;" placeholder="输入小数(0.5)" title="一定要输入小数点"/>
												<div class="btn-group"><button id="xiaoshuBtn" class="btn btn-success">小数转分数</button></div>
												<input id="xiaoshuResult" class="input-group form-control" style="width: 100px;"/>
											</div>
											<p></p>
											<div class="input-group cal" hidden="hidden">
												<input id="fenshu" class="input-group form-control" style="width: 100px;" placeholder="输入分数(3/4)" title="一定要输入（/）"/>
												<div class="btn-group"><button id="fenshuBtn" class="btn btn-success">分数转小数</button></div>
												<input id="fenshuResult" class="input-group form-control" style="width: 100px;"/>
											</div>
										</div>
									</div>
								</div>
							</div>
					</div>
					</div>
			</div>
		</div>
</div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/util.js"></script>
    <script>
    	function getTr(){
    		return $("<tr></tr>");
    	}
    	function getTd(){
    		return $("<td></td>");
    	}
    	
    	
    	//乘法口诀表
    	function chengfakoujuebiao(){
    		var table = $("#muttab");
    		for(var i = 1;i<=9;i++){
    			var tr = getTr();
    			for(var j = 1;j<=i;j++){
    				var td = getTd();
    				td.html(j+"*"+i+"="+i*j);
    				tr.append(td);
    			}
    			table.append(tr);
    		}
    	}
    	//运算符变更
    	function headBtn(signal){
    		$("#headBtn").html(signal)
    	}
    	
    	function actived(e){
    		$(e).siblings().removeClass('active');
    		$(e).addClass('active');
    	}
    	var cal = {};//加减乘除符号对象
    	function setSignal(signal){
    		if('+'===signal){
    			return cal.oper1 + cal.oper2;
    		}else if('-'===signal){
    			return cal.oper1-cal.oper2;
    		}else if('*'===signal){
    			return cal.oper1*cal.oper2;
    		}else if('/'===signal){
    			return cal.oper1/cal.oper2;
    		}
    	}
    	
    	$(document).ready(function(){
    		chengfakoujuebiao()
    		$("#calBtn").click(function(){
	    		$('.cal').toggle();
	    	})
    		$("#getResult").click(function(){
		    	cal.oper1 = parseFloat($("#oper1").val());
		    	cal.oper2 = parseFloat($("#oper2").val());
		    	var signal = $("#headBtn").html().trim();
    			$("#calResult").val(setSignal(signal));
    		})
    		
    		$('#fenshuBtn').click(function(){
    			var val = $('#fenshu').val();
    			$('#fenshuResult').val(fen2xiao(val))
    		})
    		$('#xiaoshuBtn').click(function(){
    			var val = $('#xiaoshu').val();
    			$('#xiaoshuResult').val(xiao2fen(val))
    		})
    	})
    	
    </script>
  </body>
</html>